<template>
  <div class="news-container">
    <h1>新闻列表</h1>

    <div class="filter-controls">
      <select v-model="selectedType" @change="fetchNews">
        <option value="1">类型1</option>
        <option value="2">类型2</option>
        <option value="3">类型3</option>
      </select>
      
      <input 
        type="date" 
        v-model="startDate" 
        @change="fetchNews" 
        placeholder="开始日期"
      >
      
      <input 
        type="date" 
        v-model="endDate" 
        @change="fetchNews" 
        placeholder="结束日期"
      >
      
      <button @click="fetchNews">刷新数据</button>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      <div class="spinner"></div>
      <span>数据加载中...</span>
    </div>

    <!-- 新闻列表 -->
    <div v-else>
      <div v-if="newsList.length === 0" class="no-data">
        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7Z" stroke="#cccccc" stroke-width="2"/>
          <path d="M8 10H16" stroke="#cccccc" stroke-width="2" stroke-linecap="round"/>
          <path d="M8 14H12" stroke="#cccccc" stroke-width="2" stroke-linecap="round"/>
          <circle cx="17" cy="12" r="1" fill="#cccccc"/>
        </svg>
        <p>暂无新闻数据</p>
      </div>

      <div v-else class="news-list">
        <div v-for="news in newsList" :key="news.id" class="news-item">
          <h2>{{ news.title }}</h2>
          <div class="meta">
            <span><i class="icon user"></i>{{ news.author }}</span>
            <span><i class="icon time"></i>{{ formatDate(news.submittime) }}</span>
            <span><i class="icon views"></i>{{ news.pageviews }}次浏览</span>
            <span v-if="news.ishot" class="hot-tag">热门</span>
          </div>
          <p class="summary">{{ news.summary }}</p>
          <img v-if="news.images" :src="news.images" alt="新闻图片" class="news-image">
        </div>
      </div>
      
      <!-- 分页控件 -->
      <div class="pagination">
        <button 
          v-for="page in totalPages" 
          :key="page" 
          @click="changePage(page)"
          :class="{ active: currentPage === page }"
        >
          {{ page }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'

// 响应式状态
const newsList = ref([])
const loading = ref(false)
const selectedType = ref('1')
const startDate = ref('')
const endDate = ref('')
const currentPage = ref(1)
const totalPages = ref(1)

// 计算请求参数
const requestParams = computed(() => ({
  tid: selectedType.value,
  current: currentPage.value,
  ...(startDate.value && { previousTime: startDate.value }),
  ...(endDate.value && { followingTime: endDate.value })
}))

// 获取新闻数据
const fetchNews = async () => {
  try {
    loading.value = true
    const response = await axios.get('http://localhost:8080/news/type', {
      params: requestParams.value
    })
    
    if (response.data.success) {
      newsList.value = response.data.data || []
      totalPages.value = response.data.total || 1
    } else {
      console.error('获取新闻失败:', response.data.errorMsg)
    }
  } catch (error) {
    console.error('请求出错:', error)
    alert('获取新闻列表失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 分页切换
const changePage = (page) => {
  currentPage.value = page
  fetchNews()
}

// 日期格式化
const formatDate = (dateString) => {
  return new Date(dateString).toLocaleString()
}

// 组件挂载时自动加载数据
onMounted(() => {
  fetchNews()
})
</script>

<style scoped>
.news-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.filter-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-controls select,
.filter-controls input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.filter-controls button {
  padding: 8px 15px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.no-data {
  text-align: center;
  padding: 40px;
  color: #777;
}

.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.news-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  transition: transform 0.2s;
}

.news-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.news-item h2 {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  color: #333;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 10px;
}

.icon {
  margin-right: 3px;
}

.summary {
  color: #444;
  line-height: 1.5;
  margin-bottom: 15px;
  font-size: 0.9rem;
}

.news-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-top: 10px;
}

.hot-tag {
  background-color: #ff6b6b;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 30px;
}

.pagination button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.pagination button.active {
  background: #2196F3;
  color: white;
  border-color: #2196F3;
}
</style>